<template>
<!--      <router-link to="/zone">zone</router-link>-->
  <div class="container">
    <br>
    <br>
    <br>
    <div class="login-wrapper">
<!--      <div class="header" ><h1 class="logo">Swift touch</h1></div>-->
      <br>
      <br>

      <br>
      <br>
      <br>

      <avatar-component class="avatar" :user-name="username"></avatar-component>
<!--    表单填写区-->
      <div class="form-wrapper">
        <form action="/login">
          <el-icon class="user-icon"><User />
          </el-icon> <input type="text" id="username" name="username"  v-model="username" placeholder="  admin" class="input-item">
          <p id="p1" style="display: none">登录规则1</p>
          <el-icon class="password-icon"><Lock /></el-icon>
          <input type="password" id="password" name="password"  v-model="password" placeholder="password" class="input-item">
          <p  id="p2" style="display: none">登录规则1</p>
        </form>

        <div class="btn" @click="check()">登录</div>


      </div>
      <div class="msg">
        没有账户？
        <router-link to="/register" style="text-decoration: none;color: #a6c1ee">注册</router-link>


      </div>
      <div>
        <router-link to="/ManagerLogin" style="text-decoration: none;color: #a6c1ee">管理员登录入口➞</router-link>
      </div>
    </div>

    <br>
    <br>
    <br>
  </div>
</template>

<script>
import axios from "axios";
import Avatar from "@/components/AvatarComponent";
import AvatarComponent from "@/components/AvatarComponent";
import {ElMessage} from "element-plus";

export default {
  name:"LoginView",
  components: {AvatarComponent},
  data(){
    return{
      username: '',
      password:''
    }
  },
  methods:{
      check(){
        var username= document.getElementById("username").value
        var password=document.getElementById("password").value

        if(username==""){
          document.getElementById("p1").style.display="inline"
          document.getElementById("p1").innerHTML="用户名不能为空"
        }else {
          document.getElementById("p1").style.display="none"
        }
        if(password==""){
          document.getElementById("p2").style.display="inline"
          document.getElementById("p2").innerHTML="密码不能为空"
        }else {
          document.getElementById("p2").style.display="none"
        }
        if(username !=""&& password!=""){
          this.login();
          // this.$router.push({path: '/zone',name:'zone', query: {selected: "2"}});
        }

      },

        login(){
          var username= document.getElementById("username").value
          var password=document.getElementById("password").value
          const  _this=this


          console.log(this.$cookies.isKey(this.username))

          //检查cookie中是否有username 是否登录过
          if(this.$cookies.isKey(this.username)){
            console.log("Token令牌登录")
            axios({
              method: 'post',
              url: 'http://localhost:8081/Token/tokenLogin',
              params: {
                token:this.$cookies.get(this.username)
              }
            })
                .then(function (response) {
                  console.log(response); // 前台调试能够看到获取到数据了
                  // alert(response.data)
                  if(response.data=="success"){
                    console.log("使用Token登录成功")
                    _this.$router.push({path: '/homePage',name:'homePage', query: {username: username}});
                  }else if(response.data=="expired"){
                    alert("令牌过期，清空缓存")
                    this.$cookies.remove(this,username)
                  }else {
                    alert("登录失败")
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
          }else{
            console.log("第一次登录，使用账号密码登录")
            axios({
              method: 'post',
              url: 'http://localhost:8081/Token/onceLogin',
              params: {
                UserName:this.username,
                UserPassword:this.password
              }
            })
                .then(function (response) {
                  console.log(response); // 前台调试能够看到获取到数据了
                  // alert(response.data)
                  if(response.data=="fail"){
                    alert("登录失败")
                  }else {
                    console.log("使用账户密码登录成功，加入Token")
                    _this.token=response.data
                    console.log(_this.token)
                    _this.$cookies.set(_this.username, _this.token, "0.5h")
                    console.log(document.cookie)
                    _this.$router.push({path: '/homePage',name:'homePage', query: {username: username}});

                  }
                })
                .catch(function (error) {
                  console.log(error);
                });


          }







          //axios传值给后端
         /* axios({
            method: 'post',
            url: 'http://localhost:8081/login',
            params: {
                UserName:username,
                UserPassword:password
            }
          })
              .then(function (response) {
                console.log(response); // 前台调试能够看到获取到数据了
                // alert(response.data)
                if(response.data=="success"){
                  //登录成功，跳转到zone页面，带入参数
                  _this.$router.push({path: '/homePage',name:'homePage', query: {username: username}});
                }else if(response.data=="suspended"){
                  ElMessage({
                    message:"此账号因不良言论被封禁",
                    type:'warning'
                  })
                }else {
                  ElMessage({
                    message:"账号或密码不正确",
                    type:'error'
                  })
                }
              })
              .catch(function (error) {
                console.log(error);
              });*/

        }
        }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left:50%;
  top:300px;
  transform: translate(-50%, -50%);

}
.avatar{
  /*margin-top: 100px;*/
  position: relative;
  animation: failling 2s linear;
}
@keyframes falling {
  0% {
    top: 0px;
  }

  100% {
   top: 100px;
  }
}
.header {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  color: #a6c1ee;
  font-family: Algerian;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.form-wrapper{
  margin-top: 50px;

}
.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;

}

.input-item placeholder {
  text-transform: uppercase;
}
.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
}
.msg {
  text-align: center;
  line-height: 88px;
}
.a {
  text-decoration-line: none;
  color: #abc1ee;
}
.user-icon{
  /*相对定位*/
  position: fixed;
  left: 40px;
  top: 264px;
}
.password-icon{
  /*相对定位*/
  position: fixed;
  left: 40px;
  top: 324px;
}

</style>
